<template>
  <div class="example1-wrapper">
    <div class="fr clearfix mb15">
      <bk-form form-type="inline">
        <span style="font-size: 15px;">操作人</span>
        <bk-form-item lable="操作人">
          <bk-input :clearable="true" v-model="operator" style="width: 100px;" @change="opchangeCallback">操作人</bk-input>
        </bk-form-item>
        <bk-form-item label="业务">
          <bk-select
            :disabled="false" style="width: 250px;" ext-cls="select-custom" @change="bizChangeCallback"
            ext-popover-cls="select-popover-custom" searchable>
            <bk-option
              v-for="item in biz_list"
              :key="item.bk_biz_id"
              :id="item.bk_biz_id"
              :name="item.bk_biz_id + '-' + item.bk_biz_name" />
          </bk-select>
        </bk-form-item>
        <bk-form-item label="集群">
          <bk-select
            v-model="set_id"
            :disabled="false"
            style="width: 250px;"
            ext-cls="select-custom"
            @change="setChangeCallback"
            ext-popover-cls="select-popover-custom"
            searchable><!--setChangeCallback->handleSetChange实验手册p22 !-->
            <bk-option v-for="item in set_list" :key="item.bk_set_id" :id="item.bk_set_id" :name="item.bk_set_id + '-' + item.bk_set_name" />
          </bk-select>
        </bk-form-item>
        <bk-form-item label="模块">
          <bk-select
            v-model="module_id" :disabled="false" style="width: 250px;" ext-cls="select-custom"
            @change="moduleChangeCallback" ext-popover-cls="select-popover-custom" searchable>
            <bk-option
              v-for="item in module_list" :key="item.bk_module_id" :id="item.bk_module_id"
              :name="item.bk_module_id + '-' + item.bk_module_name" />
          </bk-select>
        </bk-form-item>
        <bk-form-item>
          <bk-button theme="primary" title="提交" @click="searchHosts">搜索</bk-button>

        </bk-form-item>
      </bk-form>

    </div>


    <bk-table
      style="margin-top: 15px;" :data="host_list" :size="size" :pagination="pagination"
      @page-change="handlePageChange">
      <bk-table-column label="主机ID" prop="bk_host_id" />
      <bk-table-column label="主机IP" prop="bk_host_innerip" />
      <bk-table-column label="操作人" prop="operator" />
      <bk-table-column label="备份维护人" prop="bk_backup_operator" />
      <bk-table-column label="操作">
        <template slot-scope="props">
          <bk-button
            theme="primary" text :disabled="props.row.status === '创建中'"
            @click="getHostDetail(props.row.bk_host_id)">查看详情
          </bk-button>
        </template>
      </bk-table-column>
    </bk-table>
    <bk-sideslider
      class="bk-layout-component-nelgpjna sideslider1e5ab" :is-show.sync="isSidesliderShow"
      :title="('主机详情')" :show-mask="false" :width="600" direction="right">
      <template slot="content">
        <div class="step-detail-container">
          <div class="step-detail-item" v-for="item in host_detail" :key="item.bk_property_id">
            <strong>{{ item.bk_property_name + '：' }}</strong>
            <span>{{ item.bk_property_value ? item.bk_property_value : '无' }}</span>
          </div>
        </div>
      </template>
    </bk-sideslider>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      size: 'small',
      formData: {
        name: '',
        date: '',
      },
      tableData: [],
      biz_list: [],
      biz_id: null,
      set_list: [],
      set_id: null,
      module_list: [],
      module_id: null,
      host_list: [],
      operator: null,
      bak_operator: null,
      host_detail: [],
      isSidesliderShow: false,
      pagination: {
        current: 1,
        count: 0,
        limit: 10,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getBizData();
    },
    async getTableData() {
      try {
        const res = await this.$store.dispatch('example/getTableData', {}, { fromCache: true });
        this.tableData = res.data.list;
        this.pagination.count = res.data.list.length;
      } catch (e) {
        console.error(e);
      }
    },
    async getBizData() {
      try {
        const response = await this.$store.dispatch('example/getBizData', {}, { fromCache: true });
        this.biz_list = response.data.info;
        console.log(response);
      } catch (e) {
        console.error(e);
      }
    },
    async getSetData() {
      try {
        const response = await this.$store.dispatch('example/getSetData', { bk_biz_id: this.biz_id }, { fromCache: true });
        this.set_list = response.data.info;
      } catch (e) {
        console.error(e);
      }
    },
    async getModuleData() {
      try {
        const response = await this.$store.dispatch('example/getModuleData', {
          bk_biz_id: this.biz_id,
          bk_set_id: this.set_id,
        }, { fromCache: true });
        this.module_list = response.data.info;
      } catch (e) {
        console.error(e);
      }
    },
    async searchHosts() {
      try {
        const params = { bk_biz_id: this.biz_id };
        if (this.set_id) {
          params.bk_set_id = this.set_id;
        }
        if (this.module_id) {
          params.bk_module_id = this.module_id;
        }
        if (this.operator) {
          params.operator = this.operator;
        }
        const response = await this.$store.dispatch('example/getHostData', params, { fromCache: true });
        this.host_list = response.data.info;
      } catch (e) {
        console.error(e);
      }
    },
    // eslint-disable-next-line camelcase
    async getHostDetail(bk_host_id) {
      try {
        const response = await this.$store.dispatch('example/getHostDetail', { bk_host_id }, { fromCache: true });
        this.host_detail = response.data;
        this.isSidesliderShow = true;
      } catch (e) {
        console.error(e);
      }
    },
    // eslint-disable-next-line no-unused-vars
    bizChangeCallback(newValue, oldValue) {
      this.biz_id = newValue;
      this.set_id = null;
      this.module_id = null;
      // Fixed bug: 当业务下拉框修改时设置集群为空，导致触发空值回调，无故修改模块下拉框
      this.module_list = [];
      if (newValue != null) this.getSetData();
    },
    // eslint-disable-next-line no-unused-vars
    setChangeCallback(newValue, oldValue) {
      console.log('切换了集群，集群id为：', newValue);
      this.set_id = newValue;
      this.module_id = null;
      if (newValue != null) this.getModuleData();
    },
    // eslint-disable-next-line no-unused-vars
    moduleChangeCallback(newValue, oldValue) {
      this.module_id = newValue;
    },
    toggleTableSize() {
      const size = ['small', 'medium', 'large'];
      const index = (size.indexOf(this.size) + 1) % 3;
      this.size = size[index];
    },
    handlePageChange(page) {
      this.pagination.current = page;
    },
    opchangeCallback() {
      console.log('输入框内容已改变，当前值为：', this.operator);
    },
    remove(row) {
      const index = this.tableData.indexOf(row);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
    },
    reset(row) {
      // eslint-disable-next-line no-param-reassign
      row.status = '创建中';
    },
  },
};
</script>
